<template>
    <div class="cinema">
      <transition name="fade">
        <div class="boxShadow" v-show="shadowStatus" @click="shadowStatus=false"></div>
      </transition>
      <loading v-show="isLoading"></loading>
      <div class="top">
        <div class="left">
          <button class="btn-search" @click="$router.push('/chooseCity')">{{currentCity}}</button>
        </div>
        <div class="right">
          <input type="text" class="ipt-search-msg" placeholder="搜索影片、影院" @click="$router.push('/search')">
        </div>
      </div>
      <div class="bottom">
        <div class="title">
          <div class="search-item" @click.stop.prevent="_getSearchList(0)">{{checkedArea.value}}<span class="arrow-bottom"></span></div>
          <div class="search-item" @click.stop.prevent="_getSearchList(1)">{{checkedActivity.value}}<span class="arrow-bottom"></span></div>
          <div class="search-item" @click.stop.prevent="_getSearchList(2)">{{checkedDistance.value}}<span class="arrow-bottom"></span></div>
        </div>
        <div class="refresh-wrapper" v-show="isRefresh">
          <refresh ></refresh>
        </div>
        <transition name="fade">
          <div class="indexes-list" v-show="shadowStatus">
            <div class="indexes-item" v-show="showAreaStatus" v-for="item in area">
              <div class="indexes-item-container" :class="{active:item===checkedArea}" @click="checkedArea=item">
                {{item.value}}
              </div>
            </div>
            <div class="indexes-item" v-show="showActivityStatus"v-for="item in activity">
              <div class="indexes-item-container" :class="{active:item===checkedActivity}" @click="checkedActivity=item">
                {{item.value}}
              </div>
            </div>
            <div class="indexes-item" v-show="showDistanceStatus" v-for="item in distance">
              <div class="indexes-item-container" :class="{active:item===checkedDistance}" @click="checkedDistance=item">
                {{item.value}}
              </div>
            </div>
          </div>
        </transition>
        <div class="content" ref="content">
          <div class="item-wrapper">
            <div class="row" v-for="item in cinemaModelList" @click="$router.push({path:'/chooseSession',query:{id:item.id}})">
              <div class="collect-wrapper">
                <collect :isCollect="item.collectStatus===1"></collect>
              </div>
              <div class="name">
                <div class="left">{{item.name}}</div>
                <div class="right">
                  <span class="count">{{item.lowestPrice}}元</span>&nbsp;起
                </div>
              </div>
              <div class="address">
                <div class="left">{{item.address}}</div>
                <div class="right">{{item.distanceDesc}}</div>
              </div>
              <div class="activity">
                <span class="act-item" v-for="tag in item.actLabelList" v-if="tag.type===0">{{tag.actLabel}}</span>
              </div>
              <div class="text" v-for="(text,index) in item.actLabelList" v-if="text.type===1&&index===0">
                <span class="text-icon">促</span> {{text.actName}}
              </div>
            </div>
            <endLine class="end-line" v-show="endFlag" :text="'我是有底线的'"></endLine>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import collect from '../../../components/collect/collect'
    import {getStorage} from "../../../common/js/localStorage";
    import {Toast} from 'mint-ui'
    import BScroll from 'better-scroll'
    import endLine from '../../../components/endLine/endLine'
    import refresh from '../../../components/refresh/refresh'
    import {getSession} from "../../../common/js/sessionStorage";
    import loading from '../../../components/loading/loading'
    import global from '../../../common/js/global'
    export default {
        name: "cinema",
        created(){

        },
        data(){
          return{
            isLoading:false,
            shadowStatus:false,
            showAreaStatus:false,
            showActivityStatus:false,
            showDistanceStatus:false,
            isRefresh:false,
            indexes:[],
            area:[],
            activity:[],
            distance:[],
            checkedArea:{code:-1,value:'城市区域'},
            checkedActivity:{code:0,value:'活动类型'},
            checkedDistance:{code:1,value:'离我最近'},
            initializeFlag:true,
            cinemaModelList:[],
            endFlag:true,
            rows:10,
            currentCity:''
          }
        },
        methods:{
          _getSearchList(status){
            switch (status) {
              case 0:
                this.showAreaStatus = true
                this.showActivityStatus = false
                this.showDistanceStatus = false
                break
              case 1:
                this.showAreaStatus = false
                this.showActivityStatus = true
                this.showDistanceStatus = false
                break
              case 2:
                this.showAreaStatus = false
                this.showActivityStatus = false
                this.showDistanceStatus = true
                break
            }
            this.shadowStatus = true
          },
          _getCinemaList(){
            this.isLoading = true
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo')?getStorage('userInfo').JSESSIONID:''
                },
                url:global.$host+'/cinemaList',
                data:{
                  offset:0,
                  rows:this.rows,
                  longitude:getSession('point').lng,
                  latitude:getSession('point').lat,
                  cityCode:getSession('currentCityCode'),
                  areaCode:this.checkedArea.code,
                  labelActType:this.checkedActivity.code,
                  featureType:this.checkedDistance.code
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  let data = res.data.data
                  if(this.initializeFlag){
                    this.area = data.areaList
                    this.checkedArea = data.areaList[0]
                    this.activity = data.labelActTypeList
                    this.checkedActivity = data.labelActTypeList[0]
                    this.distance = data.featureTypeList
                    this.checkedDistance = data.featureTypeList[0]
                    this.initializeFlag = false
                  }
                  this.isLoading = false
                  this.cinemaModelList = data.cinemaModelList
                  this.endFlag = data.endFlag
                }else {
                  Toast(res.data.errorMsg)
                }
              }else {
                Toast('服务器错误，错误代码:'+res.data.status)
              }
            }).catch((res)=>{
            })
          }
        },
        mounted(){
          console.log(global.ERR_OK)
          this._getCinemaList()
          this.currentCity = getSession('currentCity')
          this.$nextTick(()=>{
            if(!this.scroll){
              // return
              let scroll = new BScroll(this.$refs['content'],{
                click:true,
                pullUpLoad:{
                  threshold:-50
                },
                pullDownRefresh: {
                  threshold: 20,
                  stop: 15
                }
              })
              scroll.on('pullingDown', () => {
                this.isRefresh = true
                setTimeout(()=>{
                  window.history.go(0)
                  scroll.finishPullDown();
                },600)
              });
              let _this = this
              scroll.on('pullingUp',()=>{
                if(!_this.endFlag){
                  _this.rows+=10;
                  _this._getCinemaList()
                }
                scroll.refresh()
                scroll.finishPullUp()

              })
            }else {
              this.scroll.refresh();
            }
          })
        },
        watch:{
          'checkedArea'(){
            this._getCinemaList()
          },
          'checkedActivity'(){
            this._getCinemaList()
          },
          'checkedDistance'(){
            this._getCinemaList()
          }
        },
        components:{
          'collect':collect,
          'endLine':endLine,
          'refresh':refresh,
          'loading':loading
        }
    }
</script>

<style scoped lang="stylus">
  .refresh-wrapper
    position absolute
    width 100%
    top 40px
    z-index 10000
  .cinema
    height 100%
    /*position relative*/
    .boxShadow
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      z-index 10
      background rgba(0,0,0,0.7)
      opacity 1
      &.fade-enter-active
        transition: opacity .4s;
      &.fade-enter
        opacity: 0;
      &.fade-leave-active
        transition opacity .4s
      &.fade-leave-to
        opacity 0
    .top
      height 26px
      display flex
      padding 9px 10px
      .left
        flex 0 0 60px
        .btn-search
         height 26px
         border none
         padding-right 10px
         background url("arrow_bottom.svg") no-repeat calc(100%) center / 8px 4px
         line-height 26px
         outline none
         color #ffffff
      .right
        flex 1
        .ipt-search-msg
          font-size 14px
          height 100%
          outline none
          width calc(100% - 26px)
          padding-left 26px
          border-radius 13px
          background #171718 url("btn-search.svg") no-repeat 5px center /16px 16px
          color #ffffff
    .bottom
      height calc(100% - 46px)
      position relative
      .title
        position relative
        z-index 100
        height 32px
        display flex
        .search-item
          background #171718
          line-height 32px
          flex 1
          color #8B929E
          font-size 13px
          text-align center
          &:active
            background #3c3c3f
          .arrow-bottom
            display inline-block
            background url("arrow_bottom_yellow.svg") no-repeat center  6px/8px 5px
            height 13px
            width 18px

      .indexes-list
        position absolute
        width 100%
        top 32px
        left 0
        z-index 100
        text-align left
        background #171718
        font-size 0
        padding 18px 0 16px 0
        &.fade-enter-active
          transition: opacity .4s;
        &.fade-enter
          opacity: 0;
        &.fade-leave-active
          transition opacity .4s
        &.fade-leave-to
          opacity 0
        .indexes-item
          display inline-block
          width 25%
          color #666666
          height 32px
          line-height 32px
          text-align center
          padding 4px 0
          .indexes-item-container
            width 70px
            border 1px solid #666666
            margin 0 auto
            font-size 12px
            border-radius 2px
            &.active
              border 1px solid #F7C20F
              color #F7C20F
            &:active
              border 1px solid #F7C20F
              color #F7C20F


      .content
        overflow hidden
        height calc(100% - 28px)
        .row
          position relative
          user-select none
          padding 10px 18px
          background #171718
          margin-bottom 10px
          &:active
            background #242425
          .collect-wrapper
            position absolute
            right 4px
            top 8px
            width 10px
            height 10px
          .name
            display flex
            height 22px
            line-height 22px
            /*margin-top 10px*/
            .left
              flex 1
              text-align left
              font-size 16px
              color #F2F2F2
            .right
              flex 0 0 66px
              text-align right
              color #f2f2f2
              font-size 12px
              .count
                color #F7C20F
                font-size 14px

          .address
            height 17px
            line-height 17px
            font-size 12px
            color #ACB1BB
            display flex
            margin-top 6px
            .left
              flex 1
              text-align left
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
            .right
              flex 0 0 66px
              text-align right
          .activity
            text-align left
            height 24px
            line-height 24px
            margin-top 2px
            .act-item
              line-height 13px
              display inline-block
              height 13px
              color #F7C20F
              border 1px solid #F7C20F
              font-size 10px
              border-radius 7px
              padding 1px 2px
              margin-right 3px
          .text
            margin-top 7px
            text-align left
            font-size 12px
            color #ACB1BB
            height 17px
            /*line-height 17px*/
            .text-icon
              display inline-block
              background #EEAC21
              color #222426
              width 14px
              height 14px
              font-size 10px
              text-align center
              line-height 15px
              border-radius 2px
              vertical-align bottom
</style>
